<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Kyouko-配音工具-当前无活动工程</title>
  <link rel="stylesheet" href="./libs/themes/material.css">
  <link rel="stylesheet" href="src/css/main.css">
</head>

<body>
  <x-menubar class="up-menu">
    <x-menuitem>
      <x-label>文件</x-label>

      <x-menu>

        <x-menuitem id="new-project">
          <x-label>新建工程</x-label>
          <x-shortcut value="Control+N"></x-shortcut>
        </x-menuitem>

        <x-menuitem id="open-project">
          <x-label>打开工程</x-label>
          <x-shortcut value="Control+O"></x-shortcut>
        </x-menuitem>

        <hr>

        <x-menuitem id="SaveProject">
          <x-label>保存工程</x-label>
          <x-shortcut value="Control+S"></x-shortcut>
        </x-menuitem>

        <x-menuitem id="SaveAsProject">
          <x-label>保存为</x-label>
          <x-shortcut value="Control+Shift+S"></x-shortcut>
        </x-menuitem>

        <x-menuitem id="quit-app">
          <x-label>退出程序</x-label>
          <x-shortcut value="Control+q"></x-shortcut>
        </x-menuitem>
      </x-menu>
    </x-menuitem>

    <x-menuitem>
      <x-label>导出</x-label>

      <x-menu>
        <x-menuitem id="ex-all">
          <x-icon name="album"></x-icon>
          <x-label>导出全部音频</x-label>
        </x-menuitem>

        <x-menuitem id="ex-txt">
          <x-icon name="comment"></x-icon>
          <x-label>导出txt</x-label>
        </x-menuitem>

      </x-menu>
    </x-menuitem>

    <x-menuitem>
      <x-label>帮助</x-label>

      <x-menu>
        <x-menuitem class="help-doc">
          <x-icon name="help"></x-icon>
          <x-label>帮助文档</x-label>
        </x-menuitem>

        <x-menuitem id="view-electron">
          <x-label>electron官网</x-label>
        </x-menuitem>

        <x-menuitem id="view-code">
          <x-label>项目源码</x-label>
        </x-menuitem>

        <!-- <x-menuitem>
          <x-label>检查更新</x-label>
        </x-menuitem> -->
      </x-menu>
    </x-menuitem>



  </x-menubar>

  <!--left-->
  <div class="up">
    <div class="left-side">
      <div class="oneline"></div>
      <x-buttons tracking="-1" style="margin: auto;background-color: aliceblue;">
        <x-button id="newItemBtn" style="background-color: aliceblue;">
          <x-box>
            <x-icon name="add"></x-icon>
            <x-label>新段落</x-label>
          </x-box>
        </x-button>

        <x-button id="import-text" style="background-color: aliceblue;">
          <x-box>
            <x-icon name="input"></x-icon>
            <x-label>导入txt文本</x-label>
          </x-box>
        </x-button>

        <x-button id="refresh-it-btn" style="background-color: aliceblue;">
          <x-box>
            <x-icon name="refresh"></x-icon>
            <x-label>刷新</x-label>
          </x-box>
        </x-button>
      </x-buttons>
      <div class="oneline"></div>
      <hr>

      <div class="left-list">
        <div id="list-renderer" class="under-go">

        </div>

      </div>
    </div>
    <div class="mid-side"></div>
    <!--right-->
    <div class="right-side">
      <h2 id="e-title" contenteditable=false style="margin: 10px ;color: rgb(23, 95, 153);-webkit-user-select: none;">
        第一段</h2>
      <hr>
      <div class="right-content" style="overflow: scroll;height: 75%;">
        <h4 style="font-weight: bold;color: rgb(23, 95, 153);margin: 5px;-webkit-user-select: none;">简述</h4>
        <x-textarea id="e-description"
          style="background-color: aliceblue; opacity: 1;margin: auto;padding: 0;width:98%;" value="开场白" disabled>
        </x-textarea>
        </x-textarea>
        <h4 style="font-weight: bold;color: rgb(23, 95, 153);margin: 5px;-webkit-user-select: none;">内容</h4>
        <x-textarea id="e-content" style="background-color: aliceblue; opacity: 1;margin: auto;padding: 0;width:98%;"
          value="大家好，我是Fungus light." disabled></x-textarea>
        <h4 style="font-weight: bold;color: rgb(23, 95, 153);margin: 5px;-webkit-user-select: none;">参数</h4>

        <div style="width:90%;float: left; padding: 1vw;">
          <div style="width: 2%;float:left;opacity: 0;">1</div>

          <div style="width: 25%;float: left;">

            <div style="width: 30%;float:left;-webkit-user-select: none;">讲述人 </div>
            <div style="width: 2%;float:left;opacity: 0;">1</div>

            <x-select style="float: left;width: 68%;" id="e-speaker" skin="flat" disabled>
              <x-menu>

                <x-menuitem value='1' toggled>
                  <x-label>度小宇</x-label>
                </x-menuitem>

                <x-menuitem value='0'>
                  <x-label>度小美</x-label>
                </x-menuitem>

                <x-menuitem value='106'>
                  <x-label>度博文</x-label>
                </x-menuitem>

              </x-menu>
            </x-select>
          </div>
        </div>

        <div style="float: left;width: 90%; padding: 1vw;">

          <div style="width: 2%;float:left;opacity: 0;">1</div>
          <div style="width: 10%;float:left;-webkit-user-select: none;">语速 </div>
          <div style="width: 2%;float:left;opacity: 0;">1</div>
          <x-numberinput id="e-speed" disabled value="5" min="0" max="15"
            style="width: 25%;float:left;background-color: aliceblue;">
            <x-stepper disabled="decrement"></x-stepper>
          </x-numberinput>
        </div>

        <div style="float: left;width: 90%; padding: 1vw;">

          <div style="width: 2%;float:left;opacity: 0;">1</div>
          <div style="width: 10%;float:left;-webkit-user-select: none;">音调 </div>
          <div style="width: 2%;float:left;opacity: 0;">1</div>
          <x-numberinput id="e-tune" disabled value="5" min="0" max="15"
            style="width: 25%;float:left;background-color: aliceblue;">
            <x-stepper disabled="decrement"></x-stepper>
          </x-numberinput>
        </div>


        <div style="float: left;width: 90%; padding: 1vw;">

          <div style="width: 2%;float:left;opacity: 0;">1</div>
          <div style="width: 10%;float:left;-webkit-user-select: none;">音量 </div>
          <div style="width: 2%;float:left;opacity: 0;">1</div>
          <x-numberinput id="e-volum" disabled value="5" min="0" max="15"
            style="width: 25%;float:left;background-color: aliceblue;">
            <x-stepper disabled="decrement"></x-stepper>
          </x-numberinput>
        </div>
      </div>
      <hr>
      <div class="btn-group" style="margin: auto;padding: 10px;" centered>
        <x-button id="e-diaedit-btn" disabled style="float:left;background-color: aliceblue;">
          <x-box>
            <x-icon name="done"></x-icon>
            <x-label>完成</x-label>
          </x-box>
        </x-button>

        <x-button disabled style="float:left;opacity:0;">
        </x-button>

        <x-button id="e-edit-btn" style="float:left;background-color: aliceblue;">
          <x-box>
            <x-icon name="edit"></x-icon>
            <x-label>编辑</x-label>
          </x-box>
        </x-button>
        <x-button disabled style="float:left;opacity:0;">
        </x-button>
        <x-button id="try-listen" style="float:left;background-color: aliceblue;">
          <x-box>
            <x-icon name="headset"></x-icon>
            <x-label>试听</x-label>
          </x-box>

        </x-button>
        <x-button disabled style="float:left;opacity:0;">
        </x-button>
        <x-button id="export-audio" style="float:left;background-color: aliceblue;">
          <x-box>
            <x-icon name="save"></x-icon>
            <x-label>生成音频</x-label>
          </x-box>
        </x-button>
      </div>

    </div>
  </div>

  <!--分割线横向-->
  <div style="height: 0.5vh;width: 100vw; float: left; background-color: rgb(84, 114, 160);"></div>

  <!--页底栏-->
  <div class="footer">

    <!--设置按钮-->
    <x-button skin="flat" style="--primary-color:rgb(17, 70, 114); float: left;">
      <x-icon name="settings"></x-icon>

      <!--设置栏位-->
      <dialog id="setting">

        <x-notification id="notification" timeout="1000"></x-notification>
        <h3 style="margin: 10px ;color: rgb(23, 95, 153);">配置项</h3>
        <hr>
        <!--具体设置区域-->
        <div style="height: 82%;overflow: scroll;">

          <!--百度语音-->
          <h4 style="font-weight: bold;color: rgb(23, 95, 153);margin: 5px;">百度云语音合成API</h4>
          <x-input skin="flat" id="baidu-app-id">
            <x-label>app-id</x-label>
          </x-input>
          <x-input skin="flat" id="baidu-app-key">
            <x-label>app-key</x-label>
          </x-input>
          <x-input skin="flat" id="baidu-secret-key">
            <x-label>secret-key</x-label>
          </x-input>
          <br>

          <h4 style="font-weight: bold;color: rgb(23, 95, 153);margin: 5px;">默认参数</h4>
          <div style="width:90%;float: left; padding: 1vw;">
            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <div style="width: 10%;float:left; color: rgb(23, 95, 153); font-weight: bold;">讲述人 </div>
            <div style="width: 2%;float:left;opacity: 0;">1</div>

            <!--度小宇=1，度小美=0，度逍遥=3，度丫丫=4-->
            <!--度博文=106，度小童=110，度小萌=111，度米朵=103，度小娇=5-->
            <div style="width: 50%;float: left;">
              <x-select skin="flat" id="default-speaker">
                <x-menu>
                  <x-menuitem value='1' toggled>
                    <x-label>度小宇</x-label>
                  </x-menuitem>

                  <x-menuitem value='0'>
                    <x-label>度小美</x-label>
                  </x-menuitem>

                  <x-menuitem value='106'>
                    <x-label>度博文</x-label>
                  </x-menuitem>

                </x-menu>
              </x-select>
            </div>
          </div>

          <div style="float: left;width: 90%; padding: 1vw;">

            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <div style="width: 10%;float:left; color: rgb(23, 95, 153); font-weight: bold;">语速 </div>
            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <x-numberinput id="default-speed" value="5" min="0" max="15"
              style="width: 25%;float:left;background-color: aliceblue;">
              <x-stepper disabled="decrement"></x-stepper>
            </x-numberinput>
          </div>

          <div style="float: left;width: 90%; padding: 1vw;">

            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <div style="width: 10%;float:left; color: rgb(23, 95, 153); font-weight: bold;">音调 </div>
            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <x-numberinput id="default-tune" value="5" min="0" max="15"
              style="width: 25%;float:left;background-color: aliceblue;">
              <x-stepper disabled="decrement"></x-stepper>
            </x-numberinput>
          </div>


          <div style="float: left;width: 90%; padding: 1vw;">

            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <div style="width: 10%;float:left; color: rgb(23, 95, 153); font-weight: bold;">音量 </div>
            <div style="width: 2%;float:left;opacity: 0;">1</div>
            <x-numberinput id="default-volume" value="5" min="0" max="15"
              style="width: 25%;float:left;background-color: aliceblue;">
              <x-stepper disabled="decrement"></x-stepper>
            </x-numberinput>
          </div>
        </div>
        <hr>

        <div class="btn-group" style="margin: auto;padding: 10px;vertical-align: auto;" centered>

          <x-button id="save-settings" style="float:left;background-color: aliceblue;">
            <x-box>
              <x-icon name="save"></x-icon>
              <x-label>保存设置</x-label>
            </x-box>
          </x-button>

          <x-button disabled class="hide-btn">
          </x-button>

          <x-button disabled class="hide-btn">
          </x-button>
          <x-button onclick="this.closest('dialog').close()" class="close-setting">
            <x-box>
              <x-icon name="close"></x-icon>
              <x-label>关闭设置</x-label>
            </x-box>
          </x-button>
        </div>
      </dialog>
    </x-button>

    <!--帮助按钮，可以打开文档等-->
    <x-button skin="flat" style="--primary-color:rgb(17, 70, 114); float: left;">
      <x-icon name="help"></x-icon>
      <dialog style="margin: auto;background-color: aliceblue;">
        <main>
          <div>
            <img width="50px" height="50px" style="float: left;" src="./logo.ico">
            <p style="float: left;">Kyouko(响子)是一款整合了百度在线语音合成api的辅助应用，你可以用来为你的视频等生成配音方案。</p>
          </div>

          <br>
          <x-button class="help-doc" class="help-doc">
            <x-label>打开帮助文档</x-label>
          </x-button>
          <br>
          <p>作者：Fungus-Light</p>
          <br>
          <a id="fork-me" class="fork-me" href="#!">去关注我，催促摸鱼的我填各种坑。</a>
          <br>
          <p id="version-info">当前版本号：0.1.0a</p>
        </main>
        <footer>
          <x-button onclick="this.closest('dialog').close()">
            <x-label>了解</x-label>
          </x-button>
        </footer>
      </dialog>
    </x-button>

    <!--网络状况测试显示按钮-->
    <x-button skin="flat" class="network">
      <x-icon id="online-icon" name="wifi"></x-icon>
      <x-icon id="offline-icon" name="cancel" style="display: none;"></x-icon>
    </x-button>

  </div>

  <x-notification id="sys-notification" timeout="1500"></x-notification>

  <dialog id="newItemwin" class="newItemwin">
    <main class="auto-center">
      <p>请输入你的标题</p>
      <x-input id="new-title"></x-input>
      <p>请输入你的简述</p>
      <x-input id="new-description"></x-input>
      <p>请输入你的内容</p>
      <x-textarea id="new-content" class="auto-center new-content"></x-textarea>
    </main>
    <footer class="auto-center">
      <x-button id="newTextItem">
        <x-label>提交</x-label>
      </x-button>
      <x-button
        onclick="$('#new-title').attr('value','');$('#new-description').attr('value','');$('#new-content').attr('value','');this.closest('dialog').close();">
        <x-label>关闭</x-label>
      </x-button>
    </footer>
  </dialog>

  <dialog id="quit-warning" class="auto-center">
    <main>
      <h3>保存当前进度吗？</h3>
      <p>未保存的进度可能丢失。</p>
    </main>

    <footer>
      <x-buttons>
        <x-button id="save-quit">
          <x-label>保存退出</x-label>
        </x-button>
        <x-button id="force-quit">
          <x-label>不保存退出</x-label>
        </x-button>
        <x-button onclick="this.closest('dialog').close();">
          <x-label>取消</x-label>
        </x-button>
      </x-buttons>

    </footer>

  </dialog>

  <dialog id="FileExist-warning" class="auto-center">
    <main>
      <h3>保存当前进度吗？</h3>
      <p>当前有打开的文件！未保存的进度可能丢失。</p>
    </main>

    <footer>
      <x-buttons id="continue-group" param="-1">
        <x-button id="continue-save">
          <x-label>保存继续</x-label>
        </x-button>
        <x-button id="continue-nosave">
          <x-label>不保存继续</x-label>
        </x-button>
        <x-button onclick="this.closest('dialog').close();">
          <x-label>取消</x-label>
        </x-button>
      </x-buttons>
    </footer>
  </dialog>

  <dialog id="listen-bar" class="auto-center listen-bar">
    <main id="player-bar">
      <p>试听效果</p>
      <br>
      <audio id="test-player" controls style="width: 60%;margin: auto;">
      </audio>
    </main>
    <footer>
      <x-button onclick="document.getElementById('test-player').pause();this.closest('dialog').close()">
        <x-label>关闭</x-label>
      </x-button>
    </footer>
  </dialog>

  <dialog id="waiting-bar" class="auto-center">
    <br>
    <x-throbber style="margin: auto;width: 2rem;height: 2rem;"></x-throbber>
    <p style="text-align: center;">正在操作中，请耐心等待。</p>
  </dialog>

  <dialog id='export-all-bar' class="auto-center">
    <br>
    <div style="width: 80%;margin: auto;">
      <p>输出中。。。</p>
      <x-progressbar id="export-value" ></x-progressbar>
    </div>
  </dialog>

  <dialog id='export-txt-bar' class="auto-center">
    <br>
    <div style="width: 80%;margin: auto;">
      <p>请根据需要划分每一行</p>
      <x-textarea id="ex-txt-value" style="max-height: 40vh;"></x-textarea>
    </div>
    <footer>
      <x-button id="ex-txt-confirm">
        <x-label>导出</x-label>
      </x-button>
      <x-button onclick="$('#ex-txt-value').value='';this.closest('dialog').close()">
        <x-label>关闭</x-label>
      </x-button>
    </footer>
  </dialog>

  <script src="src/js/utils.js"></script>
  <script src="libs/jquery/jquery.min.js"></script>
  <script>if (typeof module === 'object') { window.jQuery = window.$ = module.exports; };</script>
  <script src="./libs/xel.min.js"></script>
  <script src="src/js/render.js"></script>
  <script src="src/js/editor.js"></script>
  <script src="src/js/dataManager.js"></script>
  <script src="src/js/system.js"></script>
  <script src="src/js/logic.js"></script>
</body>

</html>